import ReactCjh, { useEffect, useState } from 'react';
import './index.scss'
import * as echarts from 'echarts';
import service from '../../../../api'
import { useSearchParams } from 'react-router-dom';

const Cjh = () => {

var [params,setParams]=useSearchParams()
console.log('0000000000000000',params.get("id"));
var id=params.get("id")
    var [datamap, setDatamap] = useState([])

    
    // echarts数据
    var [mydata,setMydata]=useState({
        data001:[],
        data002:[]
    })


    useEffect(() => {
        // window.location.reload()
        // smallList()
        myecharts()
        searchId()
    }, [])
    useEffect(() => {
        myecharts()
    }, [mydata])
    // var smallList = async () => {
    //     let res = await service.CJH.smallBox_list()
    //     console.log(res.data);
    //     if (res.status == 200) {
    //         setData(res.data)
    //     }
    // }




var searchId=async()=>{
    // console.log('494486',id);
    
   let res=await service.CJH.view_list({id})
   console.log('33333333333333',res.data);
   setDatamap(res.data[0].text)
   setMydata(res.data[0])
   console.log(res.data[0]);
   
}


    // var commentsList=async()=>{
    //     let res=await service.CJH.comments_list()
    //     console.log(res);
        
    // }

    var myecharts = () => {
        var myChart = echarts.init(document.getElementById('main') || document.body);
        myChart.setOption({
            title: { text: '累计数据' },
            xAxis: { data: ["06/16","06/17","06/18","06/19","06/20","06/21","06/22","06/23","06/24","06/25"] },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'line',
                    data: mydata.data001,
                    smooth: true,
                    symbol: "none",
                    // itemStyle:{
                    //     barBorderRadius: [5,5,0,0],
                    //     //新建一个渐变色生成器
                    //     color: new echarts.graphic.LinearGradient(
                    //         0, 0, 0, 1,
                    //         [
                    //             {offset: 0, color: '#000'},
                    //             {offset: 1, color: '#fff'}
                    //         ]
                    //     )
                    // }
 
                },
                {
                    name: '数量',
                    type: 'line',
                    data: mydata.data002,
                    smooth: true,
                    symbol: "none",
                    // areaStyle: {
                    //     normal: {
                    //         color: new echarts.graphic.LinearGradient(
                    //             0, 0, 0, 1,
                    //             [
                    //                 {offset: 0, color: '#f00'},
                    //                 {offset: 1, color: 'green'}//transparent是渐变到无色。
                    //             ]
                    //         )
                    //     }
                    // }
 
                }
            ]
        });
    }

    return (
        <div className='Cjh'>
            <div className="top">
                <div className='jiben'>基本信息</div>
                <div className="addbox">
                    {
                        datamap.map((item: any) => {
                            return (
                                <div className="topSmall">
                                    <p>{item.text}</p>
                                    <p>{item.num}</p>
                                    <p><span>较前一日</span><span>+{item.nummm}</span></p>
                                </div>
                            )
                        })
                    }

                </div>
            </div>
            <div className="echarts" id='main'>

            </div>
        </div>
    );
};

export default Cjh;